<template>
    <el-dialog :close-on-click-modal="false" ref="dialogform" :title="title" :visible.sync="dialogVisible" width="90%"
        :before-close="handleClose">
        <div class="module">
            <div class="label">批次信息</div>
            <div class="content">
                <div class="infoItem w100p">批次编号: <span>{{ batchInfo.batchCode }}</span> </div>
                <div class="infoItem w100p">养殖品种:
                    <span v-show="batchInfo.batchPondList && batchInfo.batchPondList.length"
                        v-for="batchPondInfo, index in batchInfo.batchPondList" :key="index">{{
                            batchPondInfo.plantVarietyName + ';' }}</span>
                    <span v-show="!batchInfo.batchPondList || batchInfo.batchPondList.length == 0">暂无养殖品种</span>
                </div>
                <div class="content">
                    <div class="infoItem">养殖设施: <span>{{ facilityObj[batchInfo.facilityId] }}</span> </div>
                    <div class="infoItem">养殖占比: <span>{{ batchInfo.pondRatio + '%' }}</span> </div>
                    <div class="infoItem">批次创建时间: <span>{{ $moment(batchInfo.buildDate).format("YYYY-MM-DD") }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="module">
            <div class="label">作业信息</div>
            <div class="content">
                <div class="workInfo">
                    <div class="label childLabel">投喂作业{{ `投喂次数：${jobListFeeding.length}次` }}</div>
                    <el-table border :data="jobListFeeding" style="width: 100%">
                        <el-table-column prop="facilityName" label="作业设施">
                        </el-table-column>
                        <el-table-column prop="staffName" label="作业人">
                        </el-table-column>
                        <el-table-column label="投喂详情">
                            <template slot-scope="scope">
                                <div v-if="scope.row.workTaskDetailList && scope.row.workTaskDetailList.length > 0"
                                    v-for="item, index in scope.row.workTaskDetailList">
                                    投喂{{ item.materialName }}{{ item.num }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="作业时间">
                            <template slot-scope="scope">
                                {{ scope.row.workStartTime }}至{{ scope.row.workEndTime }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="workInfo">
                    <div class="label childLabel">吊网作业{{ `次数：${jobListHanging.length}次` }}</div>
                    <el-table border :data="jobListHanging" style="width: 100%">
                        <el-table-column prop="facilityName" label="作业设施">
                        </el-table-column>
                        <el-table-column prop="staffName" label="作业人">
                        </el-table-column>
                        <el-table-column label="作业时间">
                            <template slot-scope="scope">
                                {{ scope.row.workStartTime }}至{{ scope.row.workEndTime }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="workInfo">
                    <div class="label childLabel">漏网作业{{ `次数：${jobListExposed.length}次` }}</div>
                    <el-table border :data="jobListExposed" style="width: 100%">
                        <el-table-column prop="facilityName" label="作业设施">
                        </el-table-column>
                        <el-table-column prop="staffName" label="作业人">
                        </el-table-column>
                        <el-table-column label="作业时间">
                            <template slot-scope="scope">
                                {{ scope.row.workStartTime }}至{{ scope.row.workEndTime }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="workInfo">
                    <div class="label childLabel">换水作业{{ `次数：${jobListChangeWater.length}次` }}</div>
                    <el-table border :data="jobListChangeWater" style="width: 100%">
                        <el-table-column prop="facilityName" label="作业设施">
                        </el-table-column>
                        <el-table-column prop="staffName" label="作业人">
                        </el-table-column>
                        <el-table-column label="作业时间">
                            <template slot-scope="scope">
                                {{ scope.row.workStartTime }}至{{ scope.row.workEndTime }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="module">
            <div class="content">
                <div class="workInfo">
                    <div class="label">疫病治疗信息</div>
                    <div class="label childLabel">{{ `疫病治疗次数：${diseaseList.length}次` }}</div>
                    <el-table border :data="diseaseList" style="width: 100%">
                        <el-table-column prop="diseaseName" label="疾病名称">
                        </el-table-column>
                        <el-table-column prop="plantVarietyName" label="病鱼品种">
                        </el-table-column>
                        <el-table-column prop="num" label="患病粒数">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <div class="module">
            <div class="content">
                <div class="workInfo">
                    <div class="label">防疫信息</div>
                    <div class="label childLabel">{{ `防疫次数：${epidemicPreventionList.length}次` }}</div>
                    <el-table border :data="epidemicPreventionList" style="width: 100%">
                        <el-table-column label="日期">
                            <template slot-scope="scope">
                                {{ scope.row.type == 'DisinfectWork' ? '日常消杀' : '疾病防疫' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="staffName" label="防疫人">
                        </el-table-column>
                        <el-table-column prop="operationTime" label="防疫时间">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <div class="module">
            <div class="content">
                <div class="workInfo">
                    <div class="label">直鱼信息</div>
                    <div class="label childLabel">{{ `直鱼记录次数：${straightFishList.length}次` }}</div>
                    <el-table border :data="straightFishList" style="width: 100%">
                        <el-table-column prop="plantVarietyName" label="死亡品种">
                        </el-table-column>
                        <el-table-column prop="num" label="水产死亡数量">
                        </el-table-column>
                        <el-table-column prop="staffName" label="记录人">
                        </el-table-column>
                        <el-table-column prop="deadDate" label="发现死亡时间">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="module">
            <div class="content">
                <div class="workInfo">
                    <div class="label">投入物料信息</div>
                    <div class="label childLabel">{{ `投入次数：${materialInputList.length}次` }}</div>
                    <el-table border :data="materialInputList" style="width: 100%">
                        <el-table-column prop="materialName" label="物料名称">
                        </el-table-column>
                        <el-table-column prop="amount" label="投入数量">
                        </el-table-column>
                        <el-table-column prop="facilityName" label="投入鱼塘">
                        </el-table-column>
                        <el-table-column prop="staffName" label="操作人">
                        </el-table-column>
                        <el-table-column prop="inputDate" label="投入日期">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="module">
            <div class="content">
                <div class="workInfo">
                    <div class="label">产出信息</div>
                    <div class="label childLabel">{{ `产出次数：${outPutList.length}次` }}</div>
                    <el-table border :data="outPutList" style="width: 100%">
                        <el-table-column prop="plantVarietyName" label="产出品种">
                        </el-table-column>
                        <el-table-column prop="specificationName" label="产量规格">
                        </el-table-column>
                        <el-table-column prop="num" label="产量数量(粒)">
                        </el-table-column>
                        <el-table-column prop="weight" label="产量重量(斤)">
                        </el-table-column>
                        <el-table-column prop="staffName" label="操作人">
                        </el-table-column>
                        <el-table-column prop="produceDate" label="产出日期">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script>

import jobTaskManagement from '@/api/jobManagment/jobTaskManagement';//作业
import diseaseRecord from '@/api/healthManagement/diseaseRecord.js'; //疾病
import epidemicPreventionAndControl from '@/api/healthManagement/epidemicPreventionAndControl.js'; //预防
import straightFishRecord from '@/api/healthManagement/straightFishRecord.js'; //水产死亡
import materialInputRecord from '@/api/inputManagment/materialInputRecord.js'; //投入品
import outputManagment from '@/api/outputManagment/outputQuery.js'; //产出

export default {
    components: {},
    props: {
        addEditFlag: {
            type: String,
            default: () => {
                return 'add'
            }
        },
        batchInfo: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '操作表单'
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        facilityObj: {
            type: Object,
            default: () => {
                return []
            }
        },
        batchId: null,
    },
    data() {
        return {
            addEditApi: '',
            ruleForm: {},
            diseaseList: [],
            jobListFeeding: [],
            jobListHanging: [],
            jobListExposed: [],
            jobListChangeWater: [],
            diseaseList: [],
            epidemicPreventionList: [],
            straightFishList: [],
            outPutList: [],
            materialInputList: []
        }
    },
    computed: {

    },
    watch: {
        dialogVisible: {
            handler(v) {
                v && this.initData()
            }
        }
    },

    mounted() { },
    methods: {
        async initData() {
            console.log(this.batchInfo)
            let batchId = this.batchInfo.batchId;
            let facilityId = this.batchInfo.facilityId;
            //饲喂作业
            let { data: jobListFeeding } = await jobTaskManagement.queryByCondition({
                batchId, workType: "FEEDING", workStatus: "COMPLETE", status: "ENABLE"
            });
            this.jobListFeeding = jobListFeeding;
            //吊网作业
            let { data: jobListHanging } = await jobTaskManagement.queryByCondition({
                batchId, workType: "HANGING_NET", workStatus: "COMPLETE", status: "ENABLE"
            });
            this.jobListHanging = jobListHanging;
            //漏网作业
            let { data: jobListExposed } = await jobTaskManagement.queryByCondition({
                batchId, workType: "EXPOSED_NET", workStatus: "COMPLETE", status: "ENABLE"
            });
            this.jobListExposed = jobListExposed;
            //换水作业
            let { data: jobListChangeWater } = await jobTaskManagement.queryByCondition({
                batchId, workType: "CHANGE_WATER", workStatus: "COMPLETE", status: "ENABLE"
            });
            this.jobListChangeWater = jobListChangeWater;
            //疾病
            let { data: diseaseList } = await diseaseRecord.queryByCondition({ batchId, dealFlag: true, completeFlag: true });
            this.diseaseList = diseaseList;
            //预防
            let { data: epidemicPreventionList } = await epidemicPreventionAndControl.queryByCondition({ facilityId });
            this.epidemicPreventionList = epidemicPreventionList;
            //水产死亡
            let { data: straightFishList } = await straightFishRecord.queryByCondition({ batchId });
            this.straightFishList = straightFishList;
            //投入品
            let { data: materialInputList } = await materialInputRecord.queryByCondition({ batchId });
            this.materialInputList = materialInputList;
            // 产出
            let { data: outPutList } = await outputManagment.queryByCondition({ batchId });
            this.outPutList = outPutList;
        },
        //取消关闭
        cancel() {
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.btn {
    padding: 0 5px;
}

.content {
    .infoItem {
        margin: 10px 0;
    }
}

.module {
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 4px 15px 0px rgba(0, 21, 41, 0.164);
    border-radius: 6px;

    .label {
        font-size: 18px;
        font-weight: bold;
    }

    .childLabel {
        font-size: 14px;
        font-weight: 500;
        margin: 10px 0;
    }

    .workInfo {
        margin-bottom: 20px;
    }
}

::v-deep .el-dialog {
    margin-top: 3vh !important;
    height: 94vh;

    .el-dialog__body {
        height: calc(100% - 113px);
        overflow-y: auto;
    }
}
</style>